<template>
    <section>
      <el-col :span="24" class="toolbar">
        <el-form :inline="true">
          <el-form-item>
            <go-back-button></go-back-button>
          </el-form-item>
          <el-form-item style="float: right">
              <el-button type="danger" @click="getPdf" style="float: right" size="small" round>生成PDF</el-button>
          </el-form-item>
          <el-form-item style="float: right">
              <el-input placeholder="请输入文件名" v-model="htmlTitle" size="small"/>
          </el-form-item>
        </el-form>
      </el-col>

      <el-col :span="24">
        <fieldset>
          <legend>国服院学生请假流程</legend>
          <span style="margin-left: 35px;">请按如下步骤完成请假：</span>
          <ol>
            <li>填写请假申请单并签字；</li>
            <li>班主任签字；</li>
            <li>辅导员签字；</li>
            <li>教学院长签字（请假3天或3天以上）</li>
          </ol>
        </fieldset>
        <el-form style="padding-top: 100px" :inline="true" label-width="100px" id="pdfDom">
          <h1>请假条</h1>
          <el-form-item label="姓名">
            <el-input/>
          </el-form-item>
          <el-form-item label="学号">
            <el-input/>
          </el-form-item>
          <el-form-item label="班级">
            <el-input/>
          </el-form-item>
          <el-form-item label="请假时间">
            <el-date-picker align="center" range-separator="至"
                            type="daterange"
                            v-model="time"
                            start-placeholder=""
                            end-placeholder=""></el-date-picker>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input/>
          </el-form-item>
          <el-form-item label="请假事由">
            <el-input type="textarea" style="width: 300%"/>
          </el-form-item>
          <br/>
          <el-form-item label="班主任意见">
            <el-input type="textarea" :rows="3" style="width: 300%"/>
          </el-form-item>
          <br/>
          <el-form-item label="辅导员意见">
            <el-input type="textarea" :rows="3" style="width: 300%"/>
          </el-form-item>
          <br/>
          <el-form-item label="院长意见">
            <el-input type="textarea" :rows="3" style="width: 300%"/>
          </el-form-item>
        </el-form>
      </el-col>
    </section>
</template>

<script>
  import GoBackButton from '@/views/template/GoBackButton'
    export default {
      name: "excuse",
      data(){
          return{
            htmlTitle:"",
            time:"",
          }
      },
      components:{
        GoBackButton
      },
      methods:{
        getPdf(){
          this.$getPdf();
        }
      }
    }
</script>

<style scoped>
  legend{
    font-weight: 500;
    font-size: 25px
  }
  h1{
    color: dodgerblue;
    text-align: center;
    font-size: xx-large;
  }
</style>
